<!-- Basic UI for running the demo in the browser -->

<html>
  <head>
    <title>Hierarchical MPC</title>
    <style>
      .error {
        color: #FF0000;
      }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="/dist/jiff-client.js"></script>

    <!-- Contains UI Handlers and Input Checks -->
    <script type="text/javascript" src="./client.js"></script>

    <!-- Contains the MPC implementation -->
    <script type="text/javascript" src="./mpc.js"></script>
  </head>
  <body>
    <h1>Connect JIFF</h1>
    <label for="computation_id">Computation ID</label> <input id="computation_id" value="test-threshold"><br/><br/>
    <label for="upper_count">Upper Party Count</label> <input id="upper_count" pattern="[0-9]*" value="2"> <br/><br/>
    <label for="lower_count">Lower Party Count</label> <input id="lower_count" pattern="[0-9]*" value="3"> <br/><br/>
    <label for="party_id">Party ID</label> &nbsp;&nbsp; <input id="party_id" pattern="[0-9]+"> <small>(in [1, lower party count] for lower parties, [lower party count+1, lower + upper count] for upper parties</small> <br/><br/>
    <button id="connectButton" onclick="connect();">Connect</button>
    <br/><br/>

    <hr/>

    <h1>Hierarchical Thresholding under MPC</h1>
    <label for="number">Input:</label> &nbsp; &nbsp; &nbsp; &nbsp; <input id="number" pattern="[0-9]+"> <small>(Upper party input will be ignored)</small><br/>
    <label for="threshold">Threshold:</label> <input id="threshold" pattern="[0-9]+" value="10"> <small>(should be the same for all parties)</small><br/>
    <button onclick="submit();" disabled="disabled" id="button">Compute</button> &nbsp;
    <button onclick="reconnect();" disabled="disabled" id="reconnect">Reconnect</button><br/>

    <div id="output"></div>

  </body>
</html>
